{% extends 'site.html' %}
{% load static %}
{% block content-title %}
    <title>{{ article_now.title }}</title>
{% endblock %}
{% block site-main %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 128px;
            text-align: center;
            margin-top: 10px;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url({% static 'img/upup.gif' %}) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url({% static 'img/downdown.gif' %}) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }


        .diggword {
            margin-top: 5px;
            margin-left: 0;
            font-size: 12px;
            color: #808080;
        }

        .opacity50 {
            opacity: 0.5
        }
    </style>
    {% csrf_token %}
    <div class="pull-right opacity50" id="data_gross">  <!-- 顶部posted信息 -->
        <span>随笔总数 - {{ article_data_all.count }}</span>
        <span>点赞数 - {{ up_gross }}</span>
        <span>点踩数 - {{ down_gross }}</span>
        <span>评论数 - {{ comment_gross }}</span>
    </div>
    <br>
    <div class="article_title">
        <h2>{{ article_now.title }}</h2>
    </div>
    <hr>
    <div class="article_content"
         style="width: 100%;font-size: 16px;line-height: 30px">{{ article_now.content|safe }}
    </div>
    {% if request.user.is_authenticated %}
        <div id="div_digg" style="margin-top: 50px;" class="clearfix">
            <div class="diggit" onclick="votePost({{ article_now.pk }},'Digg')">
                <span class="diggnum" id="digg_count">{{ article_now.up_count }}</span>
            </div>
            <div class="buryit" onclick="votePost({{ article_now.pk }},'Bury')">
                <span class="burynum" id="bury_count">{{ article_now.down_count }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="diggit_tips"></div>
        </div>
    {% else %}
        <div>请先<a href="{% url 'article:edit_article_like' %}">登录</a>，登陆后后即可点赞或点踩</div>
    {% endif %}

    <div class="row clearfix">
        <div class="col-md-12">
            <div class="col-md-6 pull-left text-left opacity50">
                <a href="{% url 'article:detail' username last_article_obj.pk %}">上一篇:{{ last_article_obj.title }}</a>
            </div>
            <div class="col-md-6 pull-right text-right opacity50">
                <a href="{% url 'article:detail' username next_article_obj.pk %}">下一篇:{{ next_article_obj.title }}</a>
            </div>
        </div>
    </div>
    <br>
    <div class="pull-left opacity50"><!-- 底部posted信息 -->
        <span>posted&nbsp;@</span>
        <span>{{ article_now.create_time|date:'Y-m-d H:i:s' }}&nbsp;&nbsp;</span>
    </div>
    <hr>
    {% if request.user.is_authenticated %}
        {% load article_inclusion_tags %}
        {% comment_flat blog_obj article_now %}
    {% else %}
        <div>请先<a href="{% url 'article:comment' %}">登录</a>，登录后查看评论、发表评论</div>
    {% endif %}
    <script><!-- 点赞点踩动作 -->
    function votePost(pk, tag) {
        let data = {
            'article_id': pk, 'tag': 1 ? tag === 'Digg' : 0, 'csrfmiddlewaretoken': '{{ csrf_token }}'
        };
        $.ajax({
            url: '{% url 'article:edit_article_like' %}',
            type: 'post',
            data: data,
            success: (res) => {
                if (res.code === 200) {
                    $('#diggit_tips').text(res.msg);
                } else {
                    $('#diggit_tips').text(res.errors);
                }
                setTimeout(function () {
                    // 局部刷新
                    $('#div_digg').load(location.href + ' #div_digg');
                    $('#data_gross').load(location.href + ' #data_gross');
                }, 1000)
            }
        });
    }
    </script>
{% endblock %}